<template>
    <div class="shopCenterSidebar noselect">
        <div class="shopCenterSidebarOne">
            <img src="./../../assets/img/shopCenter/shopCenterSidebarLogo.png" alt="">
            <p>商家中心</p>
        </div>
        <div :class="index == 1? 'shopCenterSidebarTwo shopCenterSidebarS':'shopCenterSidebarTwo'" @click="SelectSidebar(1)">流量中心</div>
        <div :class="index == 2? 'shopCenterSidebarThree shopCenterSidebarS':'shopCenterSidebarThree'" @click="SelectSidebar(2)">访客中心</div>
        <div :class="index == 3? 'shopCenterSidebarFour shopCenterSidebarS':'shopCenterSidebarFour'" @click="SelectSidebar(3)">交易中心</div>
        <div :class="index == 4? 'shopCenterSidebarFive shopCenterSidebarS':'shopCenterSidebarFive'" @click="SelectSidebar(4)">成交中心</div>
        <div :class="index == 5? 'shopCenterSidebarSix shopCenterSidebarS':'shopCenterSidebarSix'" @click="SelectSidebar(5)">转化率</div>
        <!--        <div :class="index == 6? 'shopCenterSidebarSeven shopCenterSidebarS':'shopCenterSidebarSeven'" @click="SelectSidebar(6)">活动中心</div>-->
        <div :class="index == 7? 'shopCenterSidebarSix shopCenterSidebarS':'shopCenterSidebarSeven'" @click="SelectSidebar(7)">账户资金</div>
    </div>
</template>

<script>
    export default {
        name: "shopCenterSidebar",
        data(){
            return {
                // 控制侧边栏选中的是哪一个(1:流量中心)(2:访客中心)(3:交易中心)(4:成交中心)(5:转化率)
                index:1,
            }
        },
        methods:{
            SelectSidebar(index){
                var that = this;
                this.index = index;
                switch(index) {
                    // 跳转流量中心
                    case 1:
                        this.$router.push({ path:'/shopIndex'});
                        break;
                    // 跳转访客中心
                    case 2:
                        this.$router.push({ path:'/SCcaller'});
                        break;
                    // 跳转交易中心
                    case 3:
                        this.$router.push({ path:'/SCdeal'});
                        break;
                    // 跳转成交中心
                    case 4:
                        this.$router.push({ path:'/SCsucceed'});
                        break;
                    // 跳转转化率
                    case 5:
                        this.$router.push({ path:'/SCpercent'});
                        break;
                    // 跳转活动中心
                    // case 6:
                    //     this.$router.push({ path:'/SCactivity'});
                    //     break;
                    //跳转资金管理
                    case 7:
                        this.$router.push({ path:'/Money'});
                        break;
                    default:

                }
            },
            // 设置可以监听路由name的函数,保持页面状态
            watchRoute(routeName){
                // 获取当前路由name,改变侧边栏选中选项
                switch(routeName) {
                    // 流量中心
                    case "SCflow":
                        this.index = 1;
                        break;
                    // 访客中心
                    case "SCcaller":
                        this.index = 2;
                        break;
                    // 交易中心
                    case "SCdeal":
                        this.index = 3;
                        break;
                    // 成交中心
                    case "SCsucceed":
                        this.index = 4;
                        break;
                    // 转化率
                    case "SCpercent":
                        this.index = 5;
                        break;
                    // 活动中心
                    // case "SCactivity":
                    //     this.index = 6;
                    //     break;
                    // 资金管理
                    case "Money":
                    case "subMoney":
                    case "deposit":
                    case "subSuccess":
                        this.index = 7;
                        break;
                    default:
                        // 其他路由,都停留在(交易中心)
                        this.index = 3;
                }
            }
        },
        watch:{
            // 监听路由name
            $route(to,from){
                console.log(this.$route.name);
                this.watchRoute(this.$route.name);
            }
        },
        mounted(){
            // 刷新页面保持状态
            this.watchRoute(this.$route.name);
        }
    }
</script>

<style scoped>
    .shopCenterSidebar{
        width:165px;
        height:808px;
        background:rgba(255,255,255,1);
        text-align: center;
    }
    .shopCenterSidebarOne{
        margin-bottom: 40px;
    }
    .shopCenterSidebarOne img{
        margin: 20px auto 10px;
    }
    .shopCenterSidebarOne p{
        font-size: 17px;
        font-weight: 400;
        color: #333333;
    }
    .shopCenterSidebarTwo,
    .shopCenterSidebarThree,
    .shopCenterSidebarFour,
    .shopCenterSidebarFive,
    .shopCenterSidebarSix,
    .shopCenterSidebarSeven{
        width:159px;
        height:57px;
        font-size:15px;
        font-weight:800;
        color:rgba(0,0,0,1);
        line-height: 57px;
        border-left: 6px solid #FFFFFF;
        margin-bottom: 15px;
        cursor: pointer;
    }
    .shopCenterSidebarS{
        color: #FB6451;
        background:#fee0dc;
        border-left: 6px solid #fb6451;
    }


</style>
